<template>
  <div class="talbe" v-loading="loading">
    <!-- <el-row type="flex" justify="end">
      <el-input v-model="params.keyword" clearable suffix-icon="el-icon-search" placeholder="Search" style="width:240px"/>
    </el-row> -->
    <el-table
      :data="data"
      style="width: 100%"
      border
      >
        <el-table-column prop="LogTime" label="Log time" show-overflow-tooltip/>
        <el-table-column prop="Result" label="Result" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.Result ? 'Success' : 'Error'}}
          </template>
        </el-table-column>
        <el-table-column prop="LogType" label="Type" show-overflow-tooltip/>
        <el-table-column prop="Message" label="Message" show-overflow-tooltip/>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      params: {}
    }
  }
}
</script>
<style lang="scss" scoped>
.talbe{
  height: calc(100% - 50px);
  .el-row{
    padding: 8px;
    box-sizing: border-box;
    height: 48px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
  }
  ::v-deep .el-table{
    height:100%;
    border: 1px solid rgba(0,0,0,0.04);
    &__header{
      .cell{
        font-size: 14px;
        font-family: Segoe UI-Semibold, Segoe UI;
        color: rgba(0,0,0,0.9);
      }
    }
    &__body-wrapper{
      height: calc(100% - 48px);
      overflow-y: auto;
    }
  }
}
</style>
